<template>
	<view class="message-list" :style="'display:'+(isShow?'block':'none')">
		<cu-custom bgColor="bg-ededed" :isBack="false" :zIndex="997">
			<block slot="backText"></block>
			<block slot="content">消息</block>
			<block slot="left">
				<view></view>
			</block>
			<block slot="right">
				<button class="cu-btn rightBtn" @click="toSearch">
					<text class="icon-roundadd text-gray" style="font-size:40upx;"></text>
					<!-- <image style="height:100%;width:100%;display:block;" src="../../static/search.png"></image> -->
				</button>
			</block>
		</cu-custom>
		
		<view :style="'height:'+(winHeight-barHeight-navHeight)+'px;display:flex;position: relative;width:100%;'">
			<common-view :zindex="997" :indicator="indicator"></common-view>
			<scroll-view class="page" :style="'height:'+(winHeight-barHeight-navHeight)+'px;'">
				<view v-if="listCount==0" class="padding text-center">
					<view :style="'height:'+(winHeight-barHeight-navHeight)+'px;width:100%;'" class="flex flex-direction justify-center align-center">
						<text class="empty-icon"></text>
						<view style="padding-bottom:100upx;" class="text-center text-grey text-sm">暂无消息</view>
					</view>
				</view>
				<view class="cu-list menu-avatar">
					<view class="cu-item cur solid-bottom" v-for="(item,index) in msgHistory" :key="index"
					@click="toChat" :data-friendid="item['history'][0]['id']" :data-unread="item['unread']" :data-name="item['history'][0]['name']" :data-avatar="item['history'][0]['avatar']" :data-type="item['history'][0]['type']">
						<view class="cu-avatar radius lg">
							<image :src="item['history'][0]['avatar']+'_100'" class="radius" mode="aspectFill"></image>
							<view v-if="item['unread']" class="cu-tag badge">{{item['unread']}}</view>
						</view>
						<view class="content flex-sub">
							<view class="name-ttp">
								<view class="text-cut">{{item['history'][0]['name']}}</view>
								<view class="action">
									<view class="text-grey text-xs">{{item['history'][0]['timestamp']}}</view>
								</view>
							</view>
							
							<!-- #ifdef MP -->
							<view class="text-gray text-sm flex text-cut">
								<rich-text :nodes="item['history'][0]['content']">
								</rich-text> 
							</view>
							<!-- #endif -->
							<!-- #ifndef MP -->
							<view class="text-gray text-sm flex">
								<rich-text :nodes="item['history'][0]['content']">
								</rich-text> 
							</view>
							<!-- #endif -->
							
						</view>
					</view>
				</view>
				<!-- <view class="cu-list menu-avatar">
					<view class="cu-item cur solid-bottom" v-for="(item,index) in msgHistory" :key="index"
					:class="modalName=='move-box-'+ index?'move-cur':''"
					@touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
						<view @click="toChat" :data-friendid="item['history'][0]['id']" :data-unread="item['unread']" :data-name="item['history'][0]['name']" :data-avatar="item['history'][0]['avatar']" :data-type="item['history'][0]['type']" class="cu-avatar radius lg">
							<image :src="item['history'][0]['avatar']+'_100'" class="radius" mode="aspectFill"></image>
							<view v-if="item['unread']" class="cu-tag badge">{{item['unread']}}</view>
						</view>
						<view @click="toChat" :data-friendid="item['history'][0]['id']" :data-unread="item['unread']" :data-name="item['history'][0]['name']" :data-avatar="item['history'][0]['avatar']" :data-type="item['history'][0]['type']" class="content flex-sub">
							<view class="name-ttp">
								<view class="text-cut">{{item['history'][0]['name']}}</view>
								<view class="action">
									<view class="text-grey text-xs">{{item['history'][0]['timestamp']}}</view>
								</view>
							</view>
							
							<!-- #ifdef MP -->
							<view class="text-gray text-sm flex text-cut">
								<rich-text :nodes="item['history'][0]['content']">
								</rich-text> 
							</view>
							<!-- #endif -->
							<!-- #ifndef MP -->
							<view class="text-gray text-sm flex">
								<rich-text :nodes="item['history'][0]['content']">
								</rich-text> 
							</view>
							<!-- #endif -->
							
						</view>
						<view class="move">
							<view class="bg-grey">置顶</view>
							<view class="bg-red">删除</view>
						</view>
					</view>
				</view> -->
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	import util from 'common/util.js'
	let me = null;
	let disp = require("common/broadcast");
	export default {
		data() {
			return {
				indicator: 4, //3
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null,
				msgHistory: {},
				listCount: 0,
				barHeight: 0
			};
		},
		props: {
			isShow: {
				type: [Boolean, String],
				default: false
			},
		},
		created(){
			me = this;
		},
		mounted() {
			this.barHeight = this.CustomBar;
			if (this.hasLogin) {
				this.msgHistory = this.transferData(this.historyMsgList);
			}
			if(this.hasLogin){
				this.$nextTick(function() {
					me.indicator=0;
				});
			}
			
			//#ifdef APP-PLUS
			this.$nextTick(function() {
				var t = setInterval(function(){plus.navigator.closeSplashscreen();clearInterval(t);}, 100);
			});
			//#endif
		},
		computed: {
			...mapState({
				navHeight: ({
					baseModule
				}) => baseModule.navHeight,
				winHeight: ({
					baseModule
				}) => baseModule.winHeight,
				hasLogin: ({
					userModule
				}) => userModule.hasLogin,
				userInfo: ({
					userModule
				}) => userModule.userInfo,
				historyMsgList: ({
					chatModule
				}) => chatModule.historyMsgList
			})
		},
		watch: {
			hasLogin(val) {
				if (val) {
					me.msgHistory = me.transferData(me.historyMsgList);
					this.$nextTick(function() {
						me.indicator=0;
					});
				}
				else{
					me.indicator = 4;
					me.msgHistory = {};
				}
			},
			historyMsgList(val) {
				me.msgHistory = me.transferData(val);
			}
		},
		methods: {
			...mapMutations(['chatModule/setChatTo']),
			transferData(msgList){
				var ms = {};
				var getUnReadCount=function(chatlog){
					var i = 0;
					for(var n=0;n<chatlog.length;n++){
						if(chatlog[n].read==0){
							i++;
						}
					}
					return i;
				};
				ms = util.deepCopy(msgList[me.userInfo.user_id]||{});
				ms = util.objSort(ms,'timestamp','desc');
				for(var key in ms){
					me.listCount++;
					ms[key]['history'][0]['timestamp'] = util.transferDate(ms[key]['history'][0]['timestamp']);
					if(ms[key]['history'][0]['type']=='group'){
						ms[key]['history'][0]['content'] = '<div class="text-cut">'+ms[key]['history'][0]['from_name']+ ":"+util.transferContent(ms[key]['history'][0]['content'])+'</div>';
					}
					else{
						ms[key]['history'][0]['content'] = '<div class="text-cut">'+util.transferContent(ms[key]['history'][0]['content'])+'</div>';
					}
					ms[key]['unread'] = getUnReadCount(ms[key]['chatlog']);
					if(ms[key]['history'][0]['mine']){
						ms[key]['history'][0]['avatar'] = ms[key]['history'][0]['to']['avatar'];
						ms[key]['history'][0]['name'] = ms[key]['history'][0]['to']['name'];
						ms[key]['history'][0]['id'] = ms[key]['history'][0]['to']['id'];
					}
				}
				
				return ms;
			},
			toChat(e){
				//console.log(e.currentTarget.dataset);
				var to = {};
				to.id=e.currentTarget.dataset['friendid'];
				to.name=e.currentTarget.dataset['name'];
				to.avatar=e.currentTarget.dataset['avatar'];
				to.type=e.currentTarget.dataset['type'];
				// console.log(to)
				me['chatModule/setChatTo'](to);
				uni.navigateTo({
					url:"../../pages1/message/chat?friendid="+e.currentTarget.dataset['friendid']+"&unread="+e.currentTarget.dataset['unread']+"&msgType="+e.currentTarget.dataset['type']
				});
				
			},
			toSearch(){},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}
		}
	}
</script>

<style>
	.cu-tag.badge{
		top:-10upx;
		right:-10upx;
		left:auto;
		bottom:auto;
	}
	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}

	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
	.cu-list .cu-item:last-child.solid-bottom:after{
		display: none;
	}
</style>
